<!doctype html>
<html>

<head>
  <meta charset="utf-8"/>
  <title>Custom Sectors</title>
  <meta name="viewport" content="width=device-width">

  <style>
  .container {
    width: 450px;
    margin: 0 auto;
    text-align: center;
  }

  .gauge {
    width: 450px;
    height: 450px;
  }

  a:link.button,
  a:active.button,
  a:visited.button,
  a:hover.button {
    margin: 30px 5px 0 2px;
    padding: 7px 13px;
  }

  </style>

</head>


<body>

  <div class="container">
    <div id="gg1" class="gauge"></div>
    <p id="gg1_text">0-50 is green, 51-100 is red</p>
    <a href="#" id="gg1_refresh" class="button grey">Random Refresh</a>
    <a href="#" id="gg1_update" class="button grey">Update Sectors</a>
  </div>

  <script src="../raphael-2.1.4.min.js"></script>
  <script src="../justgage.js"></script>
  <script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var gg1 = new JustGage({
      id: "gg1",
      value : 72.15,
      min: 0,
      max: 100,
      decimals: 2,
      gaugeWidthScale: 0.6,
      customSectors: [{
        color : "#00ff00",
        lo : 0,
        hi : 50
      },{
        color : "#ff0000",
        lo : 50,
        hi : 100
      }],
      counter: true
    });

    document.getElementById('gg1_refresh').addEventListener('click', function() {
      gg1.refresh(getRandomInt(0, 100));
    });

    document.getElementById('gg1_update').addEventListener('click', function() {
      gg1.update({
        value: getRandomInt(0, 100),
        customSectors: [{
          color : "#00ff00",
          lo : 0,
          hi : 25
        },{
          color : "#ff0000",
          lo : 25,
          hi : 100
        }]
      });
      document.getElementById('gg1_text').innerHTML = "<b>UPDATE</b>: 0-25 is green, 26-100 is red"
    });
  });
  </script>
</body>
</html>